<script setup>
  import { ref, toRefs, defineExpose } from 'vue';
  import { useDrawerStore } from '@/store/drawerDataStores.js';
  import { message } from '@/utils/message';


  const drawerStore = useDrawerStore();
  const props = defineProps({
    devVarTableSelectedItem: {
      type: Object,
      default() {
        return {}
      }
    },
    publicForm: {
      type: Object,
      default() {
        return {}
      }
    }
  });
  const { devVarTableSelectedItem, publicForm } = toRefs(props);
  const emit = defineEmits(['childFormObj']);

  const ruleFormRef = ref(),
        ruleForm = ref({
          targetAddress: undefined, // 目标地址
          targetPort: undefined, // 目标端口
          deviceAccount: undefined, // 设备账户
          devicePassword: undefined, //设备密码
          clientId: undefined, //clientId
          subscribeTopic: undefined, //订阅主题
          releaseTopic: undefined, //发布主题
          qos: undefined, //qos
          clearSession: undefined, //清理会话状态
        });

  // 配置按钮
  const configClick = () => {
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        emit('childFormObj', ruleForm.value);
      } else {
        return false;
      }
    })
  };
  // 父组件调用清空函数
  const clearVar = () => {
    ruleFormRef.value.resetFields();
  };
  // 父组件调用保存函数
  const saveStore = () => {
    drawerStore.mqttForm = ruleForm.value;
  };
  // 父组件调用赋值函数
  const copyStore = () => {
    if (devVarTableSelectedItem.value.state === 1) {
      ruleForm.value = {
        targetAddress: devVarTableSelectedItem.value.targetAddress, // 目标地址
        targetPort: devVarTableSelectedItem.value.targetPort, // 目标端口
        deviceAccount: devVarTableSelectedItem.value.deviceAccount, // 设备账户
        devicePassword: devVarTableSelectedItem.value.devicePassword, //设备密码
        clientId: devVarTableSelectedItem.value.clientId, //clientId
        subscribeTopic: devVarTableSelectedItem.value.subscribeTopic, //订阅主题
        releaseTopic: devVarTableSelectedItem.value.releaseTopic, //发布主题
        qos: devVarTableSelectedItem.value.qos, //qos
        clearSession: devVarTableSelectedItem.value.clearSession, //清理会话状态
      }
    } else {
      ruleForm.value = drawerStore.mqttForm;
    }
  };
  defineExpose({
    clearVar,
    saveStore,
    copyStore
  });
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :inline="true"
      label-position="top"
    >
      <el-form-item
        label="目标地址"
        prop="targetAddress"
        :rules="{ required: true, message: '请输入目标地址', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.targetAddress" placeholder="请输入目标地址"></el-input>
      </el-form-item>
      <el-form-item
        label="目标端口"
        prop="targetPort"
        :rules="{ required: true, message: '请输入目标端口', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.targetPort" placeholder="请输入目标端口"></el-input>
      </el-form-item>
      <el-form-item
        label="设备账户"
        prop="deviceAccount"
        :rules="{ required: true, message: '请输入设备账户', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.deviceAccount" placeholder="请输入设备账户"></el-input>
      </el-form-item>
      <el-form-item
        label="设备密码"
        prop="devicePassword"
        :rules="{ required: true, message: '请输入设备密码', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.devicePassword" placeholder="请输入设备密码"></el-input>
      </el-form-item>
      <el-form-item
        label="ClientID"
        prop="clientId"
        :rules="{ required: true, message: '请输入ClientID', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.clientId" placeholder="请输入ClientID"></el-input>
      </el-form-item>
      <el-form-item
        label="订阅主题"
        prop="subscribeTopic"
        :rules="{ required: true, message: '请输入订阅主题', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.subscribeTopic" placeholder="请输入订阅主题"></el-input>
      </el-form-item>
      <el-form-item
        label="发布主题"
        prop="releaseTopic"
        :rules="{ required: true, message: '请输入发布主题', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.releaseTopic" placeholder="请输入发布主题"></el-input>
      </el-form-item>
      <el-form-item
        label="QOS"
        prop="qos"
        style="width: 192px;"
        :rules="{ required: true, message: '请选择QOS', trigger: 'blur' }"
      >
        <el-select
          v-model="ruleForm.qos"
          placeholder="请选择QOS"
        >
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="清理会话状态"
        prop="clearSession"
        style="width: 192px;"
        :rules="{ required: true, message: '请选择会话状态', trigger: 'blur' }"
      >
        <el-select
          v-model="ruleForm.clearSession"
          placeholder="请选择会话状态"
        >
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .form-btn {
    margin-top: 30px;
  }

  .config-btn {
    text-align: right;
    padding-top: 20px
  }
</style>
